<template>
  <div class="swiper">
    <div class="item">

      <div v-for="(item,index) of list" :class="currentShow==index ? 'class-a' : 'class-b' " >
        <img class="Image" :src="item.imgUrl">
        <img class="breathingLampImage Image" :src="item.imgUrl2">
        <div class="left-header">
            <h1 v-html="item.h1"></h1>
            <p v-text="item.p"></p>
            <el-button><span v-html="item.s"></span>
            <i class="el-icon-back"></i>
        </el-button>
        </div>
      </div> 

    </div>
    <ul class="banner-tab">
            <li v-for="(item,index) in list"
                class="banner"
                :key="index"
                    @click="getIndex(index)"
                >
                <div :class="{'active': scroll === index,
                              'clactive': scroll === -index}"></div>
            </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'swiper',
  props: {
    list: Array
  },
  data() {
    return{
       currentShow: 0 , 
       scroll: 0
    }
  },
  methods: {
        lunbo() {
            window.intervalObj=setInterval(()=> {
                this.currentShow++
                this.scroll++
                if(this.currentShow ==this.list.length){
                this.currentShow=0
                }
                if(this.scroll ==this.list.length){
                this.scroll=0
                }
            },10000)
        },
        getIndex(index) {
            this.currentShow= index
            this.scroll= -index
            clearInterval(intervalObj)
        }
  },
  mounted () {
      this.lunbo()
  }
}
</script>
<style lang="stylus">
.swiper
    position relative
    height 640px
    background-color #000
    overflow hidden
    .banner-tab
        position absolute
        top 480px
        left 50%
        transform translateX(-50%)
        height 20px 
        display flex
        .banner
            background-color #474a51
            width 40px
            margin 8px 5px
            cursor pointer
            z-index 99
            .active
                height 4px
                background-color #fff
                animation time 10s linear 1
            .clactive
                height 4px
                background-color #fff
                width 40px      
    .class-b
        display none
    .class-a
        position absolute
        display block
        animation light .5s ease-in-out 1
        .Image
            height 640px
            position absolute
            left -300px
            cursor pointer
        .breathingLampImage
            animation breath 3s ease-in-out infinite
        .left-header
            position absolute
            cursor pointer
            top 180px
            left 75px
            height 320px
            color #fff
            background-color rgba(1,1,1,0)
            font-size 20px      
            h1
                width 600px
                font-weight 400
                margin-bottom 20px
            .el-button
                color #fff
                background-color rgba(1,1,1,0)
                border 0
                font-size 20px
                padding 50px 0 10px 0
                border-radius 0
                border-bottom 3px solid #00c1de
            .el-icon-back
                font-weight bold
                transform rotate(180deg)
@keyframes breath 
    from
        opacity 0.1                           
    50%
        opacity  1                         
    to
        opacity 0.1                        
@keyframes light
    from
        opacity 0.6
        transform translateY(50px)
    to
        opacity 1
        transform translateY(0px)
@keyframes time
    from
        width 0
    to
        width 40px
</style>